.site-main :where(ul,li) {
    margin: 0;
}

.flex, .flex-ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.flex {
    z-index: 2;
    align-items: center;
    padding: var(--gap-divs) var(--edge-lr)
}

.part-title {
    line-height: 1rem;
    color: hsl(var(--font-color) / .2);
}

.flow-ul {
    --trfm: translateX(1rem);
    --trfm-or: left;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(20%, 25rem, 100%);
    overflow: auto;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    scroll-padding: var(--edge-lr);
    padding: var(--edge-lr);
    margin: calc(var(--edge-lr) * -1);
    flex: calc(100% + var(--edge-lr) * 2);
    gap: var(--gap-divs);
}

.flex-ul {
    width: 100%;
    z-index: 1;
}

.flow-ul > * {
    scroll-snap-align: start;
}

.box {
    padding: var(--gap-divs);
    background: var(--s-bg, rgb(255 255 255 / .5));
    border: thin solid transparent;
    border-radius: var(--radius);
    box-shadow: var(--box-shadow-white);
}

.comments .author {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 1em;
    flex: none;
    text-transform: capitalize;
    flex-direction: column;
    margin: -2rem 0 0;
}

.comments ul a {
    --avatar-size: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1em;
    break-inside: avoid;
    transition: .3s;
}

.author .avatar {
    width: var(--avatar-size);
    object-fit: cover;
    aspect-ratio: 1;
    border: .1em dotted var(--sun-color);
    box-shadow: .2em .2em var(--sun-color);
    border-radius: 50%;
    transition: .5s;
}

.comment-info {
    display: flex;
    gap: 1em;
    margin: -.5em 0;
    align-items: center;
}

.font-small {
    opacity: .6;
    font-size: var(--font-size-small);
}

.comments .comment-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1em;
    height: 100%;
    text-align: justify;
    justify-content: space-between;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.line-clamp {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.part-btn {
    position: relative;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    z-index: 2;
}

.part-btn .btn {
    display: inline-flex;
    gap: .5rem;
}

.part-btn button {
    width: 1.5rem;
    padding: 0;
}

.part-btn button:hover {
    border-color: var(--sun-color);
}

.part-btn button.prev:after {
    content: "←"
}

.part-btn button.next:after {
    content: "→"
}

.part-btn a {
    padding: 0 1em;
    font-size: var(--font-size-small);
}

.part-btn a:before {
    content: "\e627";
    margin: 0 .5em 0 0;
    font-family: iconfont;
}

.comments .btn a:before {
    content: "\e60a";
}

.comments .btn a.add:before {
    content: "\e645";
}

.part-btn .btn > * {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--title-color);
    background: var(--s-bg, rgb(255 255 255 / .5));
    border: thin solid var(--sun-color);
    box-shadow: .25em .25em var(--sun-color);
    border-radius: 1.5rem;
    height: 1.5rem;
    line-height: 1;
    z-index: 2;
    transition: .3s;
}

@media (min-width: 1153px) {
    .comments ul {
        columns: 15rem auto;
        display: block;
        break-inside: avoid;
        gap: 2rem
    }

    .comments ul a {
        margin: 0 0 2rem;
    }

    .comments .comments-btn {
        display: none;
    }
}
